Component({

    properties: {
        tabs: {
            type: Array,
            value: []
        }
    },
    data: {
        current: 0,
        linePositionX: 0,
        linePositionWidth: 0
    },
    //组件生命周期
    lifetimes: {
        //加载组件就执行，相当于onReady()
        attached() {
            this.calculateLinePositionX()
        }
    },

    methods: {
        onTab(e) {
            const {
                index
            } = e.currentTarget.dataset
            this.setData({
                current: index
            })
            this.triggerEvent('Tab', index)
            this.calculateLinePositionX(index)
        },

        calculateLinePositionX(index = 0) {

            this.createSelectorQuery().selectAll('.tab').boundingClientRect(results => {
                const rect = results[index]
                const currentCenterX = rect.left + rect.width
                const linePositionWidth = rect.width
                const linePositionX = currentCenterX - results[0].left

                this.setData({
                    linePositionWidth,
                    linePositionX
                })
            }).exec()
        }
    }
})